<template>
    <view>
        <view
         class="kt-popup-back"
        @click="close"
        :class="{'kt-popup-back-closing': closing}"
         :style="{zIndex: zIndex}"
        v-if="show"></view>
        <view
        v-if="show"
        :style="{zIndex: zIndex+1}"
        class="kt-popup-slot"
        :class="{'kt-popup-slot-closing': closing}"
        >
            <slot></slot>
        </view>
        
    </view>
</template>

<script>
export default {
    props:{
        zIndex:{
            type: Number,
            default: 9999
        },
    },
    data(){
        return {
            show: false,
            closing: false,
        }
    },
    mounted(){
    },
    methods:{
        open(){
            this.show = true;
            this.closing = false;
        },
        close(){
            if(this.closing){
                return;
            }
            this.closing = true;
            setTimeout(() => {
                this.show = false;
                this.closing = false;
            }, 300);
            this.$emit('close');
        },

    },
}
</script>

<style lang="scss" scoped>
.kt-popup-back{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    // 动画
    animation: ktPopupBackAni 0.3s ease-in-out;
}

@keyframes ktPopupBackAni {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.kt-popup-slot{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    animation: ktPopupSlotAni 0.3s ease-in-out;
}

@keyframes ktPopupSlotAni {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0);
    }
}

.kt-popup-back-closing{
    animation: ktPopupBackAniClosing 0.3s ease-in-out;
}

@keyframes ktPopupBackAniClosing {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.kt-popup-slot-closing{
    animation: ktPopupSlotAniClosing 0.3s ease-in-out;
}

@keyframes ktPopupSlotAniClosing {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(100%);
    }
}
</style>